<template>
    <div class="postpone-workinfo-div">
        <div>

        <el-tooltip class="item" effect="dark" content="返回" placement="top">
        <div class="course-back-btn">
            <router-link to="/work/post-pone-req" class="route-link">
            <i class="el-icon-back"></i></router-link>
        </div>
        </el-tooltip>
      </div>

      <work-info :workInfo="workInfo"></work-info>

      <div class="workinfo-chart-record">
                <div class="workinfo-chart">
                    <ve-waterfall :data="chartData" :settings="chartSettings"></ve-waterfall>
                </div>

                <div class="workinfo-record">
                    请求作业延期的学生名单
                    <el-table
                    height="400"
                    :data="stuData"
                    style="width: 100%">
                        <el-table-column
                            prop="stuId"
                            label="学号"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="stuName"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="className"
                            label="班级">
                        </el-table-column>
                    </el-table>
                </div>

      </div>
      <el-divider></el-divider>

      <div class="tea-btn-div">
          
        <el-button type="danger" plain @click="decide(false)">拒绝延期</el-button>
        <div class="postpone-time">

              <el-date-picker
                v-model="postponeTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
                </el-date-picker>
        </div>

        <el-button type="success" plain @click="decide(true)">同意并更改日期</el-button>

      </div>

    </div>
</template>

<script>
import { getWorkCondition,decidePostpone } from '../../api/work'
import WorkInfo from '../../components/work/WorkInfo.vue'
export default {
  components: { WorkInfo },
  data() {
      return {
          workInfo:{},
          wpId:'',
          chartData: {
                columns: ['活动', '比例'],
                rows: [
                    // { '活动': '请求延期', '比例': 0.6 },
                    // { '活动': '未申请延期', '比例': 0.4 },
                ]
            },
            chartSettings:{
                dataType: 'percent'
            },
            stuData: [
            ],
            postponeTime:'',
      }
  },
  methods: {
      decide(isAgree) {
          decidePostpone(this.wpId, {time:this.postponeTime, isAgree:isAgree}).then(res => {
              if(res.code == 200){
                    this.$message({
                    message: '操作成功',
                    type: 'success'
                    });
              }else {
                    this.$message.error('操作失败');
              }
          })
    },
      getCondition(wpId) {
          getWorkCondition(wpId).then(res => {
              if (res.code == 200) {
                  this.chartData.rows.push( { '活动': '请求延期', '比例': res.data.putPostponeRating })
                  this.chartData.rows.push( { '活动': '未申请延期', '比例':  1 - res.data.putPostponeRating })

                  //stu
                  let stus = res.data.stus
                  for(let i = 0; i< stus.length; i++) {
                      this.stuData.push(
                          {
                            stuId: stus[i].stuNumber,
                            stuName:  stus[i].stuName,
                            className: stus[i].className
                          }
                        )
                  }

                  this.workInfo = res.data.work
                  console.log(this.stuData)
              }
          }) 
      }
  },
  mounted() {
      if (this.$route.params.wpId != undefined) {

          this.wpId = this.$route.params.wpId
          this.getCondition(this.wpId)

      }else {
          this.$router.push({path:"/work/post-pone-req"})
      }
  }

}
</script>

<style>

.postpone-workinfo-div {
    margin: 2%;
    width: 96%;
}

.workinfo-chart-record {
    width: 96%;
    display: flex;
    justify-content: space-between;
}

.workinfo-chart {
    width: 400px;
    height: 400px;
}

.workinfo-record {
    margin-left: 3%;
    width: 500px;
    text-align: center;
}

.tea-btn-div {
    display: flex;
}

.postpone-time {
    margin:0% 2% 0% 25%;
}



</style>